import React from 'react';
import { Button } from 'antd-mobile';
import './ReservationStateButton.css';

export default class ReservationStateButton extends React.Component {
    render() {
        return (
            <div className={getClassName(this.props.mapState)}
                onClick={this.props.click}>
                <Button>{getText(this.props.mapState)}</Button>
            </div>
        )
    }
}

function getClassName(mapState) {
    switch (mapState) {
        case 'normal':
            return 'reservation-state-button reservation-state-button-false'
        case 'selected':
            return 'reservation-state-button reservation-state-button-ready'
        case 'reserved':
            return 'reservation-state-button reservation-state-button-true'
        case 'selected_spot':
            return 'reservation-state-button reservation-state-button-true'
        case 'navigating':
            return 'reservation-state-button reservation-state-button-true'
        default:
            break;
    }
}

function getText(mapState) {
    switch (mapState) {
        case 'normal':
            return '未预定'
        case 'selected':
            return '选择该停车场'
        case 'reserved':
            return '开始导航'
        case 'selected_spot':
            return '开始导航'
        case 'navigating':
            return '导航中'
        default:
            break;
    }
}